<template>
  <!-- configPopUp 配置 -->
  <div class="config-popup betweenbox mediumtablestyle">

    <div class="left borderStyle">
      <div class="title blueTitleStyle">联动防区控制</div>
      <div class="content">
        <el-table
          :data="tableData"
          style="width: 100%"
          height="100%"
          @selection-change="handleSelectionChange"
          :row-class-name="tableRowClassName"
          border
        >
          <el-table-column
            type="selection"
            label=""
            width="50"
          ></el-table-column>

          <el-table-column
            label="控制类型"
            prop="controlType"
          >
            <template slot-scope="scope">
              <div class="centerbox">
                <el-select
                  v-model="scope.row.controlType"
                  size="small"
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in type_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="控制设备"
            prop="controlEquipment"
          >
            <template slot-scope="scope">
              <div class="centerbox">
                <el-select
                  v-model="scope.row.controlEquipment"
                  size="small"
                  placeholder="请选择"
                  clearable
                >
                  <el-option
                    v-for="item in equipmenet_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            label="控制点位"
            prop="controlposition"
          >
            <template slot-scope="scope">
              <div class="centerbox">
                <el-select
                  v-model="scope.row.controlposition"
                  size="small"
                  placeholder="请选择"
                  clearable
                  multiple
                  collapse-tags
                >
                  <el-option
                    v-for="item in position_options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="btn centerbox">
        <el-button
          type="primary"
          @click="handleAdd"
        >增加</el-button>
        <el-button
          type="primary"
          @click="handleDelete"
        >删除</el-button>
        <el-button
          type="primary"
          @click="handleSaveLeft"
        >保存</el-button>
      </div>
    </div>
    <div class="right borderStyle">
      <div class="title blueTitleStyle">联动防区视频监控</div>
      <div class="content">
        <div class="content-name centerbox">摄像机</div>
        <div class="content-tree">
          <el-input
            placeholder="输入关键字进行过滤"
            v-model="video"
          >
            <i
              slot="prefix"
              class="el-input__icon el-icon-search search"
            ></i>
          </el-input>
          <div class="margin"></div>
          <el-tree
            :data="treeData"
            icon-class='custom'
            :props="defaultProps"
            ref="tree"
            @node-click="handleNodeClick"
          >
            <div
              class="custom-tree-node betweenbox"
              slot-scope="{ node }"
            >
              <div>
                <span>{{ node.label }}</span>
              </div>
            </div>
          </el-tree>
        </div>
      </div>
      <div class="btn centerbox">
        <el-button
          type="primary"
          @click="handleSaveRight"
        >保存</el-button>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { objType } from "@/utils/interface";
interface optionList {
  value: string;
  label: string;
}
interface tableDataType {
  controlType?: string;
  controlEquipment?: string;
  controlposition?: any;
}
interface treeItem {
  children?: treeItem[];
  menu: boolean;
  name: string;
}
@Component
export default class extends Vue {
  defaultProps: Object = {
    children: "children",
    label: "name",
  };
  public tableData: tableDataType[] = [
    {
      controlType: "风机控制",
      controlEquipment: "#1电容器室",
      controlposition: [],
    },
    {
      controlType: "灯光控制",
      controlEquipment: "#1电容器室",
      controlposition: [],
    },
  ];
  public video: string = "";
  type_options: Array<optionList> = [
    {
      value: "",
      label: "全部",
    },
    {
      value: "风机控制",
      label: "风机控制",
    },
    {
      value: "灯光控制",
      label: "灯光控制",
    },
  ];
  equipmenet_options: Array<optionList> = [
    {
      value: "",
      label: "全部",
    },
    {
      value: "#1电容器室",
      label: "#1电容器室",
    },
    {
      value: "#1电容器室2",
      label: "#1电容器室2",
    },
  ];
  position_options: Array<optionList> = [
    {
      value: "",
      label: "全部",
    },
    {
      value: "#1电容器室点位",
      label: "#1电容器室点位",
    },
    {
      value: "#1电容器室2点位",
      label: "#1电容器室2点位",
    },
  ];
  tableSelect: Array<object> = [];
  // 树图
  treeData: Array<treeItem> = [
    {
      name: "国网济南供电公司",
      menu: false,
      children: [
        {
          name: "济宁市供电公司",
          menu: false,

          children: [
            {
              name: "济宁市供电公司",
              menu: false,
            },
          ],
        },
      ],
    },
    {
      name: "济宁市供电公司",
      menu: false,
      children: [
        {
          name: "青岛市供电公司",
          menu: false,
          children: [
            {
              menu: false,
              name: "青岛市供电公司",
            },
          ],
        },
        {
          name: "二级 2-2",
          menu: false,
          children: [
            {
              menu: false,
              name: "三级 2-2-1",
            },
          ],
        },
      ],
    },
  ];
  // -------------------左边的事件--------------------
  handleSelectionChange(val: any): void {
    // console.log(val);
    this.tableSelect = val;
  }
  // 表格隔行变色
  tableRowClassName({ row, rowIndex }: objType): string {
    // console.log(row, rowIndex);
    if (rowIndex % 2 === 0) {
      return "row1";
    } else {
      return "row2";
    }
  }
  handleAdd() {
    var list = {
      controlType: "",
      controlEquipment: "",
      controlposition: [],
    };
    this.tableData.push(list);
  }
  handleDelete() {
    if (this.tableSelect.length < 1) {
      this.$message({
        message: "请至少选择一行数据",
        type: "warning",
      });
    } else {
      // console.log(this.tableSelect);
    }
  }
  handleSaveLeft() {}

  // ----------------------------右边的事件-------------------
  handleNodeClick(data: any) {
    // console.log(data);
  }
  handleSaveRight() {}

  handleConfig() {
    this.$emit("handleConfig", this.tableData);
  }
  handleClose() {
    this.$emit("handleClose");
  }
}
</script>

<style lang="scss" scoped>
.config-popup {
  width: 100%;
  height: 5.5rem;

  .left {
    width: calc(50% - 0.1rem);
    height: 100%;
    .title {
      line-height: 0.3rem;
      height: 0.3rem;
    }
    .content {
      height: calc(100% - 0.9rem);
      box-sizing: border-box;
      padding: 0.1rem;
    }
    .btn {
      height: 0.4rem;
      box-sizing: border-box;
      margin: 0.1rem auto;
    }
  }
  .right {
    width: calc(50% - 0.1rem);
    height: 100%;
    .title {
      line-height: 0.3rem;
    }
    .content {
      height: calc(100% - 0.9rem);
      box-sizing: border-box;
      padding: 0.1rem;

      &-name {
        border: 1px solid #0a82ba;
        color: rgba(181, 230, 255, 1);
        line-height: 0.4rem;
        font-size: 0.18rem;
      }
      &-tree {
        border: 1px solid #0a82ba;
        .custom-tree-node {
          width: 100%;
          height: 0.3rem;
          box-sizing: border-box;
          line-height: 0.3rem;
          .context-menu {
            span {
              margin: 0rem 0.02rem;
            }
          }
        }
        .margin {
          height: 0.1rem;
        }
        .search {
          width: 0.3rem;
          height: 0.3rem;
          border-right: 1px solid #717ca1;
          color: #9eeaec;
        }
      }
    }
    .btn {
      height: 0.4rem;
      box-sizing: border-box;
      margin: 0.1rem auto;
    }
  }
}
</style>
